<template>
  <u-popup :show="show" mode="center" :overlay="false"  @close="closeHandle" bgColor="transparent">
    <view style="height:100vh;width:100vw;    display: flex;
    align-items: center;background: linear-gradient(rgba(255, 255, 255, .1), rgba(32, 80, 59, 0.3), rgba(45, 120, 103, 0.3), rgba(255, 255, 255, .1));">
      
    
    <view class="first-tip-modal" :style="{backgroundImage:'url('+staticImgs.bg+')'}">
<!--      <view class="info-wraper" @click="clickHandle">
        <image class="cover-img" :src="sclInfo.coverImg" mode=""></image>
        <view class="info-box">
          <view class="top-wrapper">
            <view class="name limit-text-single-line">{{sclInfo.sclName}}</view>
            <view class="intro limit-text-two-line">{{ sclInfo.summary }}</view>
          </view>
          <view class="price-box">
            <view class="base-price">
              <text class="unit-icon">¥</text>
              {{sclInfo.newOriginalPrice}}
            </view>
            <view class="col-2">
              <view class="price-label">{{discountNumText}}券后</view>
              <view class="now-price">
                <text class="unit-icon">¥</text>
                {{sclInfo.discountedPrice}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-wrapper" @click="changeScl">
        换一换
      </view>
      -->
      
      
      <!-- 领取您购买的权益 -->
      <view class="info-wraper">
        <view class="info-1">
          <view>输入兑换码</view>  
          <!-- <view>或输入商品兑换码</view>  -->
          <view>领取您购买的权益</view>  
        </view>  
        <image class="btn-img" :src="staticImgs.btn" mode="" @click="clickHandle"></image>
        <view class="info-2">
          <view>登录后还能领取优惠获得</view>
          <view>更多心理测评与咨询权益</view>
        </view>  
      </view>
      
      <!-- <view class="close-icon" @click="closeHandle">
        <u-icon name="close-circle" color="#fff" size="32"></u-icon>
      </view> -->
      </view>
    </view>
  </u-popup>
</template>

<script>
  import {
    getMoreSclInfo
  } from '@/common/api/scl_api.js'
  import {calculateDiscountedPrice} from '@/common/utils/util.js'
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      discountNum:{
        type:Number,
      }
    },
    data(){
      return{
        show:false,
        staticImgs:{
          bg: this.imgBaseURL + '/scl/first-tip-modal-bg-v2.png',
          btn: this.imgBaseURL + '/scl/first-tip-modal-btn-v2.png'
        },
        sclInfo:{},
      }
    },
    watch:{
      visible:{
        async handler(val){
          console.log(val,'=============watch visible')
          // await this.getSclInfo()
          this.show = val
        },
        immediate:true
      }
    },
    methods:{
      clickHandle(){
        // uni.navigateTo({
        // 	url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
        // 		sclId: this.sclInfo.id
        // 	})
        // })
        // this.closeHandle()
        this.$emit('confirm')
        this.show = false
      },
      closeHandle(){
        this.show = false
      },
    }
  }
</script>

<style lang="scss" scoped>
  .first-tip-modal{
    position: relative;
    // height: 936rpx;
    height: 1192rpx;
    width: 750rpx;
    // background-color: red;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    .info-wraper{
      margin-top: 250rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .info-1{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 40rpx;
        color: #146542;
        line-height: 56rpx;
        text-align: center;
        font-style: normal;
        
      }
      
      .info-2{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(20,101,66,.54);//#146542;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
      }
      
      .btn-img{
        width: 344rpx;
        height: 104rpx;
        margin: 8rpx 0;
      }
    }
    
    .close-icon{
      position: absolute;
      right: 0;
      left: 0;      
      top: 280rpx;
      justify-content: flex-end;
      padding-right: 76rpx;
      opacity: .75;
      display: flex;
    }
    
    // .btn-wrapper{
    //   margin-top: 20rpx;
    //   width: 210rpx;
    //   height: 60rpx;
    //   background: linear-gradient(134deg, #FFE6B7 0%, #F9B461 100%);
    //   border-radius: 34rpx;
      
    //   line-height: 60rpx;
    //   font-size: 30rpx;
    //   font-family: PingFang-SC, PingFang-SC;
    //   font-weight: 500;
    //   color: #906422;
    //   text-align: center;
    // }
  }
</style>